<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('my.lszd')" :leftIcon="true"></navbar>
		
		<!-- 无数据状态 -->
		<view class="no-data" v-if="!hasData">
			<image class="no-data-img" src="/static/image/my/bg7.svg" mode="aspectFit"></image>
			<text class="no-data-text">{{t('billing.zsmy')}}</text>
			<view class="refresh-btn" @click="refreshData">
				<text>{{t('billing.sxsj')}}</text>
			</view>
		</view>
		
		<!-- 有数据状态 -->
		<view class="has-data" v-else>
			<!-- 标签切换 -->
			<view class="tab-container">
				<view class="tab-item" :class="{active: activeTab === 'all'}" @click="switchTab('all')">
					{{t('billing.zp')}}
				</view>
				<view class="tab-item" :class="{active: activeTab === 'recharge'}" @click="switchTab('recharge')">
					{{t('my.cz')}}
				</view>
				<view class="tab-item" :class="{active: activeTab === 'withdraw'}" @click="switchTab('withdraw')">
					{{t('my.tx')}}
				</view>
			</view>
			
			<!-- 时间筛选 -->
			<view class="time-filter">
				<view class="filter-item" :class="{active: activeFilter === '3days'}" @click="switchFilter('3days')">
					{{t('billing.j3t')}}
				</view>
				<view class="filter-item" :class="{active: activeFilter === '7days'}" @click="switchFilter('7days')">
					{{t('billing.j7t')}}
				</view>
				<view class="filter-item" :class="{active: activeFilter === '1month'}" @click="switchFilter('1month')">
					{{t('billing.j1y')}}
				</view>
				<view class="filter-item" :class="{active: activeFilter === '1year'}" @click="switchFilter('1year')">
					{{t('billing.j1n')}}
				</view>
				<view class="filter-item" :class="{active: activeFilter === 'all'}" @click="switchFilter('all')">
					{{t('billing.qb')}}
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view class="loading-container" v-if="loading">
				<view class="loading-spinner"></view>
				<text class="loading-text">{{t('billing.loading')}}</text>
			</view>
			
			<!-- 账单列表 -->
			<view class="bill-list" v-else>
				<!-- 账单项 -->
				<view class="bill-item" v-for="(item, index) in billList" :key="index" @click="viewDetails(item.id)">
					<view class="bill-header">
						<view class="bill-title">{{item.title}}</view>
						<view class="bill-status" :class="item.status === 'ongoing' ? 'status-ongoing' : 'status-completed'">
							{{item.status === 'ongoing' ? t('billing.jxz') : t('billing.ywc')}}
						</view>
					</view>
					<view class="bill-content">
						<view class="content-row">
							<view class="content-label">{{t('billing.gmje')}}</view>
							<view class="content-label">{{t('billing.zq')}}</view>
							<view class="content-label">{{t('billing.ll')}}</view>
							<view class="content-label">{{t('billing.zsy')}}</view>
						</view>
						<view class="content-row values">
							<view class="content-value">{{item.amount}}</view>
							<view class="content-value">{{item.period}}</view>
							<view class="content-value rate">{{item.rate}}</view>
							<view class="content-value profit">{{item.profit}}</view>
						</view>
					</view>
					<view class="bill-action">
						<view class="action-details">
							{{t('billing.xq')}} ≡
						</view>
					</view>
				</view>
				
				<!-- 空列表提示 -->
				<view class="empty-list" v-if="billList.length === 0">
					<text>{{t('billing.wgd')}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useI18n } from 'vue-i18n';
	import { ref, onMounted } from 'vue';
	const { t, locale } = useI18n();
	
	// 是否有数据，用于切换显示状态
	const hasData = ref(false); // 默认为true，可以通过切换查看两种状态
	
	// 是否正在加载数据
	const loading = ref(false);
	
	// 当前激活的标签
	const activeTab = ref('all');
	
	// 当前激活的时间筛选
	const activeFilter = ref('3days');
	
	// 切换标签
	const switchTab = (tab) => {
		activeTab.value = tab;
		// 实际应用中，这里应该根据标签类型重新获取数据
		fetchBillData();
	};
	
	// 切换时间筛选
	const switchFilter = (filter) => {
		activeFilter.value = filter;
		// 实际应用中，这里应该根据时间筛选重新获取数据
		fetchBillData();
	};
	
	// 查看详情
	const viewDetails = (id) => {
		console.log('查看详情', id);
		// 这里可以跳转到详情页或者显示详情弹窗
		// 例如：uni.navigateTo({ url: `/pages/my/orderDetails?id=${id}` });
	};
	
	// 模拟获取账单数据
	const fetchBillData = () => {
		loading.value = true;
		
		// 模拟网络请求延迟
		setTimeout(() => {
			// 这里应该是实际的API请求
			// 根据activeTab和activeFilter获取对应的数据
			
			// 模拟数据
			const mockData = [
				{
					id: 1,
					title: 'Helmet #1005',
					status: 'ongoing',
					amount: '107495.00',
					period: '200天',
					rate: '+18%',
					profit: '+206'
				},
				{
					id: 2,
					title: 'Helmet #1005',
					status: 'completed',
					amount: '107495.00',
					period: '200天',
					rate: '+18%',
					profit: '+206'
				},
				{
					id: 3,
					title: 'Helmet #1005',
					status: 'ongoing',
					amount: '107495.00',
					period: '200天',
					rate: '+18%',
					profit: '+206'
				},
				{
					id: 4,
					title: 'Helmet #1005',
					status: 'completed',
					amount: '107495.00',
					period: '200天',
					rate: '+18%',
					profit: '+206'
				}
			];
			
			billList.value = mockData;
			loading.value = false;
		}, 500);
	};
	
	// 刷新数据
	const refreshData = () => {
		// 实际应用中，这里应该重新获取数据
		// 模拟获取数据成功
		hasData.value = true;
		fetchBillData();
	};
	
	// 模拟账单数据
	const billList = ref([]);
	
	// 页面加载时获取数据
	onMounted(() => {
		fetchBillData();
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding: 20rpx 30rpx 100rpx;
		box-sizing: border-box;
	}
	
	/* 无数据状态 */
	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;
		
		.no-data-img {
			width: 400rpx;
			height: 400rpx;
		}
		
		.no-data-text {
			font-size: 32rpx;
			color: #999;
			margin-top: 30rpx;
			margin-bottom: 40rpx;
		}
		
		.refresh-btn {
			background-color: #2979FF;
			color: #fff;
			padding: 15rpx 40rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			box-shadow: 0 4rpx 10rpx rgba(41, 121, 255, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
			}
		}
	}
	
	/* 有数据状态 */
	.has-data {
		margin-top: 20rpx;
		
		/* 标签切换 */
		.tab-container {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			
			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				position: relative;
				
				&.active {
					color: #2979FF;
					font-weight: bold;
					
					&::after {
						content: '';
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 6rpx;
						background-color: #2979FF;
						border-radius: 3rpx;
					}
				}
			}
		}
		
		/* 时间筛选 */
		.time-filter {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			overflow-x: auto;
			white-space: nowrap;
			
			.filter-item {
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				color: #666;
				border-radius: 30rpx;
				margin-right: 20rpx;
				
				&.active {
					color: #2979FF;
					font-weight: bold;
				}
			}
		}
		
		/* 加载状态 */
		.loading-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60rpx 0;
			
			.loading-spinner {
				width: 60rpx;
				height: 60rpx;
				border: 4rpx solid rgba(41, 121, 255, 0.2);
				border-top-color: #2979FF;
				border-radius: 50%;
				animation: spin 1s infinite linear;
			}
			
			.loading-text {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
		
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		
		/* 账单列表 */
		.bill-list {
			.bill-item {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
				transition: all 0.2s ease;
				position: relative;
				
				&:active {
					transform: scale(0.98);
					background-color: #f9f9f9;
				}
				
				.bill-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;
					
					.bill-title {
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
					}
					
					.bill-status {
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						
						&.status-ongoing {
							background-color: #E8F5FF;
							color: #2979FF;
						}
						
						&.status-completed {
							background-color: #FFE7E7;
							color: #FF5252;
						}
					}
				}
				
				.bill-content {
					margin-bottom: 10rpx;
					
					.content-row {
						display: flex;
						justify-content: space-between;
						margin-bottom: 8rpx;
						
						.content-label {
							font-size: 24rpx;
							color: #999;
							flex: 1;
							text-align: center;
							
							&:first-child {
								text-align: left;
							}
							
							&:last-child {
								text-align: right;
							}
						}
						
						.content-value {
							font-size: 26rpx;
							color: #333;
							font-weight: bold;
							flex: 1;
							text-align: center;
							
							&:first-child {
								text-align: left;
							}
							
							&:last-child {
								text-align: right;
							}
							
							&.rate, &.profit {
								color: #18B566;
							}
							
							&.rate {
								color: #FF5252;
							}
							
							&.profit {
								color: #FF5252;
							}
						}
					}
				}
				
				.bill-action {
					display: flex;
					justify-content: flex-end;
					
					.action-details {
						font-size: 24rpx;
						color: #2979FF;
						display: flex;
						align-items: center;
						position: absolute;
						right: 30rpx;
						top: 20rpx;
					}
				}
			}
			
			/* 空列表提示 */
			.empty-list {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 100rpx 0;
				
				text {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>